export default {
	template: `<div class="mt-3 d-flex flex-wrap align-items-start">
				<a href="./film.html" class="text-decoration-none" v-for="film in filmlisthot" :key="film.film_id">
					<div class="film p-2 m-2 rounded shadow shadow-hover-blue hand"><img
							:src="'./img/' + film.film_cover_image" class="w-100">
						<div class="mt-2 d-flex justify-between align-items-end">
							<div class="text-sm text-gray ellipsis">{{film.film_name}}</div>
							<div class="text-biger text-red text-bold">{{film.film_rank}}</div>
						</div>
						<div class="mt-1 text-xs text-muted ellipsis">{{film.film_title}}</div>
						<div class="mt-1 d-flex justify-between text-xs text-muted">
							<div class="d-flex">
								<div class="mr-1" v-for="category in film.category_list">
									{{category.category_name}}
								</div>
							</div>
							<div>{{film.film_duration}}m</div>
						</div>
						<div class="mt-1 d-flex justify-between text-muted text-xs">
							<div>2021-02-12</div>
							<div class="d-flex">
								<div class="ml-1" v-for="country in film.country_list">{{country.country_name}}
								</div>
							</div>
						</div>
						<div class="mt-1 text-muted text-xs d-flex flex-wrap">
							<div class="mr-2" v-for="director in film.director_list">{{director.director_name}}
							</div>
						</div>
					</div>
				</a>
			</div>`,
	props: {
		filmlisthot: {
			type: Array
		}
	}
}
